<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8">
    <title>笔记摘选-CSS篇</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="md_style.css" type="text/css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (12).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">Web学习笔记（二）：CSS篇</h1>
        </div>
        <div class="md-block">
            <hr>
            <blockquote>
                <p>声明：本篇笔记部分摘自<a href="https://www.wenjingketang.com/bookinfo?book_id=9310">《Web前端技术 - 航空工业出版社》</a>，遵循<a
                        href="https://creativecommons.org/licenses/by/4.0/legalcode.zh-hans">CC BY 4.0协议</a>。<br>
                    存在由AI生成的小部分内容，仅供参考，请仔细甄别可能存在的错误。<br />
                    本篇笔记转载自我的个人博客，<a
                        href="https://blog.morely.top/2025/05/12/Web%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%9ACSS%E7%AF%87/"
                        target=“_blank”>点击跳转到原文地址。</a>
                </p>
            </blockquote>
            <hr>
            <h1 id="css3">一、CSS3概述</h1>
            <blockquote>
                <p>
                    <code>CSS（Cascading Style Sheets，层叠样式表）</code>是一种用于描述网页<strong>外观和格式</strong>的样式表语言，具有<strong>控制网页样式</strong>、<strong>实现结构与样式分离</strong>、<strong>提升用户体验</strong>三大功能。<br>
                    CSS3采用模块化设计，W3C将其划分为一系列独立发展的模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。<sup
                        id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>
                </p>
            </blockquote>
            <hr>
            <h1 id="css3_1">二、CSS3基础</h1>
            <h2 id="1css3">1.CSS3基本语法</h2>
            <p>CSS3样式表由一个或多个CSS3样式组成，，每个CSS3样式由选择器和声明组成。<br>
                <img alt="" src="imgs/20250514174021708.png">
            </p>
            <ul>
                <li>选择器：用于匹配<code>H5</code>中的不同元素，可以是标签名、类名、ID等。</li>
                <li>声明：用于命令浏览器如何渲染指定的对象，由属性和属性值两部分组成。</li>
                <li>属性：用于设置元素样式的项。</li>
                <li>属性值：设置属性效果的参数，可以是带单位的数字或关键字。</li>
            </ul>
            <p>CSS3的注释格式： <code>/* 注释内容 */</code></p>
            <h2 id="2css3">2.CSS3的网页引入方式</h2>
            <h3 id="1">① 行内样式</h3>
            <p><code>&lt;标签名 style="属性1: 属性值1; 属性2: 属性值2; ···"&gt;&lt;/标签名&gt;</code></p>
            <h3 id="2">② 内嵌样式表</h3>
            <pre class="codehilite"><code class="language-HTML">&lt;style&gt;
    选择器{
        属性1: 属性值1;
        属性2: 属性值2;
        ···
    }
&lt;/style&gt;
</code></pre>

            <p>为保证浏览器提前识别解析CSS样式，<strong>一般将内嵌样式表写在HTM34L文件的<code>&lt;head&gt;</code>之中，<code>&lt;title&gt;</code>之后</strong>。
            </p>
            <h3 id="3">③ 链接样式表</h3>
            <p>将样式放在独立的CSS文件中，使用<code>&lt;link&gt;</code>标签进行链接:</p>
            <pre class="codehilite"><code class="language-HTML">&lt;link href=&quot;CSS3文件路径&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
</code></pre>

            <h2 id="3css3">3.CSS3选择器</h2>
            <h3 id="1_1">① 基本选择器</h3>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">选择器</th>
                        <th style="text-align: center;">格式</th>
                        <th style="text-align: center;">举例</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;"><strong>标签选择器</strong></td>
                        <td style="text-align: center;"><code>标签名 {}</code></td>
                        <td style="text-align: center;"><code>p {font-size: 20px; color: lightBlue;}</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>类选择器</strong></td>
                        <td style="text-align: center;"><code>.类名 {}</code></td>
                        <td style="text-align: center;"><code>.author {font-size: 20px; color: lightBlue;}</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>ID选择器</strong></td>
                        <td style="text-align: center;"><code>#ID {}</code></td>
                        <td style="text-align: center;"><code>#stu1 {font-size: 20px; color: lightBlue;}</code></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>通配选择器</strong></td>
                        <td style="text-align: center;"><code>* {}</code></td>
                        <td style="text-align: center;"><code>* {margin: 0; padding: 0; border: 2px;}</code></td>
                        <td>用于选择所有标签</td>
                    </tr>
                </tbody>
            </table>
            <p>注：可以为同一个元素设定多个<code>class类名</code>，通过多个选择器分别控制样式，如下所示：</p>
            <pre class="codehilite"><code class="language-html">&lt;div id=&quot;container1&quot;&gt;
  &lt;div class=&quot;item item-1&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;item item-2&quot;&gt;2&lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
.item {  /* 设置所有项目的共同样式 */
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {  /* 单独设置item1的样式 */
  background-color: #ef342a;
}
&lt;/style&gt;
</code></pre>

            <h3 id="2_1">② 复合选择器</h3>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">选择器</th>
                        <th style="text-align: left;">格式</th>
                        <th style="text-align: left;">范围图示</th>
                        <th style="text-align: left;">备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;"><strong>交集选择器</strong></td>
                        <td style="text-align: left;"><code>标签名.类名 {}</code><br><code>标签名#ID {}</code></td>
                        <td style="text-align: left;">同时满足两个选择器的标签<br><img alt="" src="imgs/20250506112846756.png"></td>
                        <td style="text-align: left;">前者必须为标签选择器；后者为类选择器或ID选择器</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>并集选择器</strong></td>
                        <td style="text-align: left;"><code>选择器1，选择器2，选择器3，··· {}</code></td>
                        <td style="text-align: left;">所有满足选择器的标签<br><img alt="" src="imgs/20250506113046770.png"></td>
                        <td style="text-align: left;">有利于减少CSS样式的冗余，提高网页加载速度</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>后代选择器</strong></td>
                        <td style="text-align: left;"><code>选择器1 选择器2 {}</code></td>
                        <td style="text-align: left;">选择器1<br>├─ <mark>选择器2</mark><br>├─ 其他元素<br>│├─
                            </mark>选择器2</mark><br>│└─ 其他元素<br>└─
                            其他元素</td>
                        <td style="text-align: left;">选择<strong>所有后代元素</strong>，包括直接子元素和更深层级的元素</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>子代选择器</strong></td>
                        <td style="text-align: left;"><code>选择器1&gt;选择器2 {}</code></td>
                        <td style="text-align: left;">选择器1<br>├─ </mark>选择器2</mark><br>├─ 其他元素<br>│├─ 选择器2<br>│└─
                            其他元素<br>└─ 其他元素
                        </td>
                        <td style="text-align: left;">只选择<strong>直接子元素</strong>，不会深入到更低层级的后代</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>相邻选择器</strong></td>
                        <td style="text-align: left;"><code>选择器1+选择器2 {}</code></td>
                        <td style="text-align: left;">根元素<br>├─ 选择器1<br>├─ <mark>选择器2</mark><br>├─ 其他元素<br>├─ 选择器2<br>└─
                            其他元素
                        </td>
                        <td style="text-align: left;">选择元素1之后<strong>紧接着的</strong>兄弟元素元素2</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>兄弟选择器</strong></td>
                        <td style="text-align: left;"><code>选择器1~选择器2 {}</code></td>
                        <td style="text-align: left;">根元素<br>├─ 选择器1<br>├─ <mark>选择器2</mark><br>├─ 其他元素<br>├─
                            <mark>选择器2</mark><br>└─ 其他元素
                        </td>
                        <td style="text-align: left;">选择元素1之后的<strong>所有</strong>元素2<br>（只要它们是同一父元素的子元素）</td>
                    </tr>
                </tbody>
            </table>
            <h3 id="3_1">③ 伪类选择器</h3>
            <ul>
                <li>用于定义元素的特殊状态</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">性质</th>
                        <th style="text-align: center;">分类</th>
                        <th style="text-align: center;">选择器</th>
                        <th>示例</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="5" style="text-align: center; vertical-align: middle;">动态伪类选择器</th>
                        <td rowspan="2" style="text-align: center; vertical-align: middle;">锚点伪类</td>
                        <td style="text-align: center;">:link</td>
                        <td>a:link {clolr: blue;}</td>
                        <td>只用于设置链接访问前的样式</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">:visited</td>
                        <td>a:link {clolr: red;}</td>
                        <td>只用于设置链接访问后的样式</td>
                    </tr>
                    <tr>
                        <td rowspan="3" style="text-align: center; vertical-align: middle;">行为伪类</td>
                        <td style="text-align: center;">:hover</td>
                        <td>a:hover {color: blue;}</td>
                        <td>设置鼠标悬浮的样式</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">:active</td>
                        <td>a:active {color: red;}</td>
                        <td>设置鼠标按下但未松开时的样式</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">:focus</td>
                        <td>a:hover {color: blue;}</td>
                        <td>设置元素获得焦点时的样式</td>
                    </tr>
                    <tr>
                        <th style="text-align: center; vertical-align: middle;">否定伪类选择器</th>
                        <td style="text-align: center; vertical-align: middle;">否定</td>
                        <td style="text-align: center;">:not()</td>
                        <td>grid:not(p) {color: red;}</td>
                        <td>匹配非指定元素或选择器的每个元素</td>
                    </tr>
                    <tr>
                        <th rowspan="3" style="text-align: center; vertical-align: middle;">状态伪类选择器</th>
                        <td style="text-align: center; vertical-align: middle;">启用</td>
                        <td style="text-align: center;">:enabled</td>
                        <td>input[type="text"]:enabled {color: blue;}</td>
                        <td>匹配每个被启用的元素(多用于表单)</td>
                    </tr>
                    <tr>
                        <td style="text-align: center; vertical-align: middle;">禁用</td>
                        <td style="text-align: center;">:disabled</td>
                        <td>input[type="text"]:disabled {color: grey;}</td>
                        <td>匹配每个被禁用的元素(多用于表单)</td>
                    </tr>
                    <tr>
                        <td style="text-align: center; vertical-align: middle;">选中</td>
                        <td style="text-align: center;">:checked</td>
                        <td>input[type="button"]:checked {color: blue;}</td>
                        <td>匹配每个被选中的元素(多用于按钮、复选框)</td>
                    </tr>
                </tbody>
            </table>

            <p>备注：<br>
                -同时使用动态伪类选择器时，<code>:hover</code>必须在<code>:link</code>和<code>:visited</code>之后，<code>:active</code>必须在<code>:hover</code>之后；否则对应的样式会无法显示。<br>
                - 四者的顺序为：<strong>a:link -&gt; a:visited -&gt; a:hover -&gt; a:active</strong>*（简记：LoVe HAte）<sup
                    id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup>。<br>
                - <code>结构伪类选择器</code>不常用，此处略去。<br>
                - 常见cursor属性(鼠标指针样式)见下表：<br>
                <img alt="常见鼠标指针及说明" src="imgs/20250509093412491.png">
            </p>
            <h3 id="4">④ 伪元素选择器</h3>
            <ul>
                <li>用于定义元素<strong>指定部分</strong>的样式，使用<strong>双冒号</strong>为前缀。</li>
                <li>基本格式：<code>选择器::伪类名 {属性1：属性值1; 属性2：属性值2; ···}</code></li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th>选择器</th>
                        <th>描述</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>::before</code></td>
                        <td>在选定的元素前添加内容</td>
                        <td><code>p::before {content: "CSS3";}</code></td>
                    </tr>
                    <tr>
                        <td><code>::after</code></td>
                        <td>在选定的元素后添加内容</td>
                        <td><code>p::after {content: "CSS3";}</code></td>
                </tbody>
            </table>
            <p>备注：使用伪元素选择器添加的内容无法被鼠标框选选中。</p>
            <h3>⑤ 属性选择器</h3>
            <td>- 根据标签的属性匹配元素</td>

            <table>
                <thead>
                    <tr>
                        <th>选择器</th>
                        <th>描述</th>
                        <th>示例</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>E[attr]</code></td>
                        <td>用于匹配所有拥有attr属性的E元素，无论属性的值是多少</td>
                        <td><code>a[id] {color: blue;}</code><br><code>a[id][class] {color: blue;}</code></td>
                    </tr>
                    <tr>
                        <td><code>E[attr="value"]</code></td>
                        <td>用于匹配所有attr属性值为value的E元素</td>
                        <td><code>a[id="first"] {color: red;}</code><br><code>a[id="first"][class="nav"] {color: red;}</code>
                        </td>
                    </tr>
                    <tr>
                        <td><code>E[attr~="value"]</code></td>
                        <td>用于匹配attr属性列表中包含value的E元素</td>
                        <td><code>a[title~="web"] {color: red;}</code></td>
                    </tr>
                    <tr>
                        <td><code>E[attr^="value"]</code></td>
                        <td>用于匹配attr属性列表以value开头的E元素</td>
                        <td><code>a[title^="web"] {color: red;}</code></td>
                    </tr>
                    <tr>
                        <td><code>E[attr$="value"]</code></td>
                        <td>用于匹配attr属性列表以value结尾的E元素</td>
                        <td><code>a[title$="web"] {color: red;}</code></td>
                    </tr>
                    <tr>
                        <td><code>E[attr*="value"]</code></td>
                        <td>用于匹配attr属性列表中包含"value"字符串的E元素</td>
                        <td><code>a[title*="web"] {color: red;}</code></td>
                    </tr>
                    <tr>
                        <td><code>E[attr\|="value"]</code></td>
                        <td>用于匹配attr属性为"value"或以以"value"开头的E元素</td>
                        <td><code>a[title\|="web"] {color: red;}</code></td>
                    </tr>
                </tbody>
            </table>
            <h2 id="4css3">4.CSS3的继承性与层叠性</h2>
            <ul>
                <li>继承性：在HTML5结构中，后代元素会继承祖先元素的CSS3样式(不可继承边框、边界、背景、定位、布局、尺寸等)。</li>
                <li>层叠性：为一个元素设置多个样式时，高优先级的样式会覆盖低优先级的样式。<ul>
                        <li>优先级递减排序：行内样式 &gt; ID选择器 &gt; 类、伪类、属性选择器 &gt; 标签选择器 &gt; 通配选择器 &gt; 继承样式</li>
                        <li>权重相同时遵循<strong>就近原则</strong></li>
                    </ul>
                </li>
            </ul>
            <hr>
            <h1 id="css3_2">三、CSS3常用属性</h1>
            <h2 id="1css3_1">1.CSS3常用长度单位及颜色表示</h2>
            <ul>
                <li>绝对长度：是固定不变的长度，多用于可以固定大小或位置的情况<ul>
                        <li>cm - 厘米</li>
                        <li>mm - 毫米</li>
                        <li>in - 英寸(inch)</li>
                        <li><strong>px - 像素(pixel)</strong> <mark>[常用]</mark></li>
                        <li>pt - 点(point)</li>
                        <li>pc - 派卡(pica)</li>
                        <li>换算关系：1in = 2.54cm = 25.4 mm = 72pt = 6pc<sup id="fnref2:3"><a class="footnote-ref"
                                    href="#fn:3">3</a></sup>
                        </li>
                    </ul>
                </li>
                <li>相对长度：是相对于另一个长度属性的长度，多用于响应式布局<ul>
                        <li>em - 相对于元素的字体大小</li>
                        <li>ex - 相对于当前字体的高度</li>
                        <li>ch - 相对于"0"的宽度</li>
                        <li>rem - 相对于根元素的字体大小</li>
                        <li>vw - 相对于视口(浏览器窗口)宽度的1%</li>
                        <li>vh - 相对于视口(浏览器窗口)高度的1%</li>
                        <li>vmin - 相对于视口(浏览器窗口)宽度的1%</li>
                        <li>vmax - 相对于视口(浏览器窗口)宽度的1%</li>
                        <li><strong>% - 相对于父元素的尺寸</strong> <mark>[常用]</mark></li>
                    </ul>
                </li>
                <li>颜色值<ul>
                        <li><strong>颜色名称</strong>：直接写明元素的颜色单词<ul>
                                <li>例：<code>p {background-color: lightblue;}</code></li>
                            </ul>
                        </li>
                        <li><strong>十六进制值表示</strong>：由<code>#</code>符号开头，后面跟随六个十六进制数字，分别表示红、绿、蓝三种颜色的值。<ul>
                                <li>例：<code>p {color: #0077FF;}</code></li>
                            </ul>
                        </li>
                        <li><strong>RGB 值</strong>：使用<code>rgb()</code>函数来定义颜色，参数为红、绿、蓝三种颜色的值，范围从 0 到 255。<ul>
                                <li>例： <code>p {color: rgb(255, 99, 71);}</code></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <blockquote>
                <p>在不同的分辨率下，像素点的大小是不同的。所以同一个网页，以px作长度单位时，在不同的分辨率下显示的大小是不同的。在低分辨率下，像素点较大，细节不够清晰，显示的页面也大，但模糊不清。<br>
                    实际上,无论是相对还是绝对单位,最终都转化为px。所以一般来说，在网页制作时，基本单位都选择px而不是pt，因为pt也是通过浏览器的DPI转换成px显示（比如FireFox的DPI是96，则有9pt
                    =
                    12px）。不仅pt，cm/in/mm等都是转换成px的。所以无论用绝对还是相对，在不同分辨率下都是会变的。不要认为把长度设置为3cm，它就会在不同的分辨率下保持3cm不变。<sup
                        id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup></p>
            </blockquote>
            <h2 id="2_2">2.文本属性</h2>
            <h3 id="1_2">① 字体样式</h3>
            <ul>
                <li>字体样式<ul>
                        <li>格式：font-family: "";</li>
                        <li>示例：<code>p {font-family: "宋体"}</code>、<code>span {font-family: "Times New Roman"}</code>
                        </li>
                        <li>备注："Times New Roman"多用于数字的字体</li>
                    </ul>
                </li>
                <li>字号(字体大小)样式<ul>
                        <li>格式：font-size: 值 | 关键字;</li>
                        <li>示例：<code>p {font-size: 20px;}</code></li>
                        <li>备注：<ul>
                                <li>值可以取以px、em、pt等为单位的数值，也可以取基于父元素或默认值的百分比。</li>
                                <li>关键字包括xx-smal、x-small、small、large、x-large、xx-large，以及根据父元素字体大小变化的smaller和larger。</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>字体粗细样式：<ul>
                        <li>格式：font-weight: <strong>normal(正常)</strong> | bold(加粗) | lighter(减细) |
                            number(100-900之间的九个数值);</li>
                        <li>示例：<code>p {font-weight: blod;}</code></li>
                        <li>备注：Win环境下，文本默认字体为"微软雅黑"，仅支持400与700两种字粗，设置为其他值时会用这两种效果替换，可能看不出变换。</li>
                    </ul>
                </li>
                <li>字体风格样式：<ul>
                        <li>格式：font-style: <strong>normal(正常)</strong> | italic(斜体) | oblique(倾斜)</li>
                        <li>示例：<code>span {font-style: italic;}</code></li>
                        <li>备注：oblique适用于没有斜体样式的字体，将其强制倾斜。</li>
                    </ul>
                </li>
            </ul>
            <h3 id="2_3">②文本格式</h3>
            <table>
                <thead>
                    <tr>
                        <th>项目</th>
                        <th>格式</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>缩进</strong></td>
                        <td>text-indent: <strong>0</strong> | 缩进长度;</td>
                        <td>长度可以是pm、em、pt、%</td>
                    </tr>
                    <tr>
                        <td><strong>水平对齐</strong></td>
                        <td>text-align: <strong>left</strong> | right | center | justify(两端对齐);</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><strong>修饰</strong></td>
                        <td>text-decoration: <strong>none</strong> | underline | overline | line-through(删除线);</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><strong>省略</strong></td>
                        <td>text-overflow: <strong>clip(不省略)</strong> | ellipsis(省略)</td>
                        <td>隐藏文本宽度过大溢出的部分，用…标记</td>
                    </tr>
                    <tr>
                        <td><strong>字符间距</strong></td>
                        <td>word-spacing: <strong>normal(无间距)</strong> | 间距值;</td>
                        <td>字母之间的间距，默认为0</td>
                    </tr>
                    <tr>
                        <td><strong>单词间距</strong></td>
                        <td>letter-spacing: <strong>normal(正常间距)</strong> | 间距值;</td>
                        <td>单词之间的间距</td>
                    </tr>
                    <tr>
                        <td><strong>行高</strong></td>
                        <td>line-height: <strong>normal(正常行高)</strong> | number(当前字体高度的倍数) | 高度值;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><strong>自动换行</strong></td>
                        <td>word-break: <strong>normal(浏览器规则)</strong> | break-all(可截断单词) | keep-all(只在空格处换行);</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><strong>空白符处理</strong></td>
                        <td>white-space: <strong>normal(忽略空白)</strong> | nowrap | pre | pre-line | pre-wrap;</td>
                        <td>较为复杂，用时再查询规则，此处忽略。</td>
                    </tr>
                    <tr>
                        <td><strong>溢出内容处理</strong></td>
                        <td>overflow: <strong>visible(溢出在边框外)</strong> | hidden | scroll(始终提供滚动条) | auto(有溢出时提供滚动条);
                        </td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <h2 id="3_2">3.图像属性</h2>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">项目</th>
                        <th>格式</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;"><strong>宽度</strong></td>
                        <td>width: 宽度值;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>高度</strong></td>
                        <td>height: 高度值;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>边框宽度</strong></td>
                        <td>border-width: 宽度值*4;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>边框风格</strong></td>
                        <td>border-style: 样式*4;</td>
                        <td>样式 = solid(单实线) | dotted(点线) | dashed(虚线) | <br> double(双线) | groove(槽线) | ridge(谷线)</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>边框颜色</strong></td>
                        <td>border-color: 颜色值*4;</td>
                        <td>颜色值的表示见本篇笔记的 <strong>三、1</strong> 部分</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>不透明度</strong></td>
                        <td>opacity: 0~1;</td>
                        <td>数值越高越不透明</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>圆角</strong></td>
                        <td>border-radius: 值*4;</td>
                        <td>在中间添加-top-right-等可单独设置每个角的圆弧大小</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>阴影</strong></td>
                        <td>box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 outset | inset;</td>
                        <td>可直接使用阴影效果生成工具<a href="https://neumorphism.io/#e0e0e0">Neumorphism.io</a>、<a
                                href="https://box-shadow.dev/">Box Shadows</a>等直接生成需要的CSS阴影样式</td>
                    </tr>
                </tbody>
            </table>
            <ul>
                <li>备注：<ul>
                        <li>属性值列表中标注了<code>*4</code>的，表示可以设置1-4个值，分别控制：<strong>上-右-下-左 | 上-左右-下 | 上下-左右 |
                                上-右-下-左</strong>。同时，可以在属性项中加上<code>-方向-</code>指定设置其中某个方向上的样式。<ul>
                                <li>例：<code>img {border-top-width: 2px;}</code>，方向可选：left | right | top | bottom</li>
                            </ul>
                        </li>
                        <li>使用<code>border属性</code>可以在同一个声明中统一设置边框宽度、风格和颜色。<ul>
                                <li>例： <code>img {border: 2px solid black;}</code></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <h2 id="4_1">4.网页背景</h2>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">项目</th>
                        <th>格式</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;"><strong>背景颜色</strong></td>
                        <td>background-color: transparent | 颜色值;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>背景图像</strong></td>
                        <td>background-image: <strong>none</strong> | <code>url(图片路径)</code>;</td>
                        <td>如<code>body {background-image: url(bg.png);}</code></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>显示方式</strong></td>
                        <td>background-repeat: <strong>repeat</strong> | repeat-x | <br>repeat-y | no-repeat | round |
                            space;</td>
                        <td>repeat表现为重复，round表现为缩放填充，<br>space表现为按相同间距平铺填充</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>起始位置</strong></td>
                        <td>background-position: 关键字 | 偏移量;</td>
                        <td>
                            <code>水平 垂直</code>格式，关键字如<code>left top</code>，偏移量如<code>0% 0%</code>或<code>0pos 0pos</code>(单位为px或em)，缺省其中一个时，缺省项为center或50%<br>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><strong>固定方式</strong></td>
                        <td>background-attachment: <strong>scroll(相对元素固定)</strong> | fixed(相对浏览器窗口固定) | lcoal(相对元素内容固定);
                        </td>
                        <td></td>
                    </tr>
            </table>
            <li>
                备注：
                <ul>可使用<code>background属性</code>在同一声明中设置多个属性值, 其中必须包含颜色或图像，其他可选</ul>
                <ul>如：<code>body {background: url(bg.png) repeat scroll;}</code></ul>
            </li>
            <h2>5.列表属性</h2>
            <table>
                <tr>
                    <td style="text-align: center;">项目</td>
                    <td>格式</td>
                    <td>备注</td>
                </tr>
                <tr>
                </tr>
                <tr>
                    <td style="text-align: center;">项目符号</td>
                    <td>list-type: 关键字;</td>
                    <td>关键字包括：<strong>disc(●)</strong> | circle(○) | none | square(■) | decimal(1) | lower-alpha(a)
                        | upper-alpha(A)
                        | lower-roman(i) | upper-roman(Ⅰ) | cjk-ideographic(一)</td>
                </tr>
                <tr>
                    <td style="text-align: center;">项目符号位置</td>
                    <td>list-style-position: <strong>outside</strong> | inside;</td>
                    <td>outside表示符号位于文本左侧，且在文本以外；inside表示符号位于文本以内，文本根据符号位置对齐</td>
                </tr>
                <tr>
                    <td style="text-align: center;">符号自定义图片</td>
                    <td>list-style-image: <strong>none</strong> | <code>url(图片路径)</code>;</td>
                    <td></td>
                </tr>
                </tbody>
            </table>
            <!-- <tr>

                        <td style="text-align: center;">## 6.超链接属性</td>
                        <td></td>
                        <td></td>
                    </tr>
            <ul>
                <li>一般通过设置<strong>载体</strong>的样式来设置超链接的样式，载体可以是图片、文本等，相关样式已在前文给出。</li>
                <li>修改超链接访问前后的样式，使用<strong>动态伪类选择器</strong>实现。</li>
            </ul> -->
            <li>
                备注：
                <ul>常用于取消列表的默认样式。</ul>
                <ul>使用<code>list-style属性</code>在同一声明中设置多个属性值。</ul>
            </li>
            <h2>6.超链接属性</h2>
            <ul>
                <li>一般通过设置<strong>载体</strong>的样式来设置超链接的样式，载体可以是图片、文本等，相关样式已在前文给出。</li>
                <li>修改超链接访问前后的样式，使用<strong>动态伪类选择器</strong>实现。</li>
            </ul>
            <h2 id="7">7.表格属性</h2>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">项目</th>
                        <th>格式</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">标题位置</td>
                        <td>caption-side: <strong>top</strong> | bottom;</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">边框合并</td>
                        <td>border-callapse: <strong>saparate(分开)</strong> | collapse(合并);</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">边框间距</td>
                        <td>boder-spacing: 间距值;</td>
                        <td>写一个值控制所有方向，两个值分别控制水平和竖直方向；间距不可取负值</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">显示空单元格</td>
                        <td>empty-cells: <strong>show</strong> | hide;</td>
                        <td>选择hide时，不绘制空单元格的边框</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">渲染方法</td>
                        <td>table-layout: <strong>auto</strong> | fixed;</td>
                        <td>默认情况下，列宽由单元格内容决定；设为fixed时，列宽由表格宽度和列宽度确定</td>
                    </tr>
                </tbody>
            </table>
            <h2 id="8">8.表单属性</h2>
            <ul>
                <li>对文本、图片、选项符号的样式调整已在前文给出</li>
            </ul>
            <blockquote>
                <p>
                    “设置表单控件<strong>获得焦点时</strong>的样式需要使用<code>:focus</code>选择器。设置<strong>单选钮和复选框</strong>的样式时，可以先将它们隐藏，再通过设置其提示信息的样式来实现单选钮与复选框的功能。此时就需要使用伪类选择器<code>:checked</code>匹配选中的单选钮或复选框，接着搭配使用其他选择器匹配选中的单选钮或复选框的提示信息，然后设置相应提示信息的样式，就可以通过提示信息的样式变化提醒用户选择了哪个选项，从而在隐藏单选钮或复选框的同时
                    不影响使用它们的功能。” ——《Web前端技术》P137</p>
            </blockquote>
            <hr>
            <h1 id="css3_3">四、CSS3布局</h1>
            <h2 id="1_3">1.盒子模型</h2>
            <ul>
                <li>HTML中大部分的元素(<code>&lt;html&gt;</code>、<code>&lt;body&gt;</code>、<code>&lt;div&gt;</code>等)都可以认为是一个盒子。
                </li>
                <li>盒子由内容与边框组成；内容与边框之间的距离为内边距，边框与其他盒子的边框之间的距离为外边距。</li>
            </ul>
            <h3 id="1_4">① 基本结构</h3>
            <p><img alt="" src="imgs/20250509170929341.png"></p>
            <div></div>

            <h3 id="2_4">② 盒子模型的属性</h3>
            <ul>
                <li>盒子的内容<ul>
                        <li>使用属性<code>width</code>、<code>height</code>设置内容的宽度和高度。</li>
                        <li>通过<code>box-sizing</code>: <strong>content-box(作用于内容区域)</strong> |
                            border-box(作用于边框及内部区域);来设置<code>width</code>与<code>height</code>属性的作用范围。</li>
                    </ul>
                </li>
                <li>盒子的边框：<ul>
                        <li>
                            使用属性设置盒子模型的边框。具有子属性<code>border-width</code>、<code>border-style</code>、<code>border-radius</code>和<code>border-color</code>分别用于设置边框的宽度、样式、圆角和颜色等样式。
                        </li>
                    </ul>
                </li>
                <li>盒子的内边距：<ul>
                        <li>格式：<code>padding: 边距值*4 | auto</code>;，默认值为0，选择auto时，浏览器自动计算内边距。</li>
                        <li>内边距可以用于撑大盒子的范围，盒子的宽高会跟随内边距变化。盒子的背景也会延伸到内边距范围(上图浅绿色部分)，而不仅仅是局限于内容的范围(上图浅蓝色部分)。</li>
                    </ul>
                </li>
                <li>盒子的外边距：<ul>
                        <li>格式：<code>margin: 边距值*4 | auto</code>;，默认值为0，选择auto时，浏览器自动计算外边距。</li>
                    </ul>
                </li>
            </ul>
            <h3 id="3_3">③ 不同类型的盒子模型</h3>
            <ul>
                <li>
                    块级元素(<code>&lt;h1&gt;~&lt;h6&gt;</code>、<code>&lt;p&gt;</code>、<strong><code>&lt;div&gt;</code></strong>、<code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>、<code>&lt;li&gt;</code>、<code>&lt;dd&gt;</code>、<code>&lt;dt&gt;</code>、<code>&lt;dl&gt;</code>等)
                    <ul>
                        <li>在页面中独占一行，宽度和高度默认填满父元素，通过<code>width</code>和<code>height</code>属性设置宽度和高度。</li>
                        <li><strong>即使设置了宽度，仍然会独占一行。</strong> 可以用<code>padding</code>和<code>margin</code>设置内外边距。</li>
                    </ul>
                </li>
                <li>
                    行内元素(<code>&lt;a&gt;</code>、<code>&lt;strong&gt;</code>、<code>&lt;b&gt;</code>、<code>&lt;em&gt;</code>、<code>&lt;i&gt;</code>、<code>&lt;del&gt;</code>、<code>&lt;s&gt;</code>、<code>&lt;ins&gt;</code>、<code>&lt;u&gt;</code>、<strong><code>&lt;span&gt;</code></strong>、<code>&lt;img&gt;</code>、<code>&lt;input&gt;</code>、<code>&lt;select&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;br/&gt;</code>等)
                    <ul>
                        <li>在页面中按从左到右、从上到下的顺序布局，不会独占一行。宽度和高度取决于内容的大小，<strong>无法</strong>
                            通过<code>width</code>和<code>height</code>设置盒子的宽高。</li>
                        <li><strong>对行内元素应用上、下方向上的外边距不会显示效果。</strong>(行内元素无法拉高父元素的高度)</li>
                    </ul>
                </li>
                <li>行内块元素(显示在同一行的块级元素)<ul>
                        <li>可以为其设置宽高、边距、边框等属性。</li>
                        <li>使用<code>display元素</code>设置元素的类型：display: <strong>none</strong> | block(块级元素，自带换行符) |
                            inline(行内元素) |
                            inline-block(行内块元素)</li>
                    </ul>
                </li>
            </ul>
            <h2 id="2_5">2.元素的排版(定位、布局)</h2>
            <h3 id="1_5">① 标准流排版</h3>
            <ul>
                <li>不使用任何与排版或定位相关的CSS规则时，各个元素<strong>默认的排版方式</strong>，盒子排成序列，同级盒子在父级盒子中按照行内或者块级元素的规则进行排列。</li>
                <li>这样的页面类似于河流的干流与支流，故称之为"<strong>标准流</strong>"或"<strong>文档流</strong>"。<br>
                    <img alt="" src="imgs/20250510134621322.png">
                </li>
            </ul>
            <h3 id="2_6">② 浮动排版(常用于图文混排)</h3>
            <ul>
                <li>在浮动排版中，块级元素的宽度由父级盒子的(其他)内容与内边距决定，而不再独占一行或占满父元素宽度。</li>
                <li>任何显示在浮动元素下方的元素都会在网页中向上移动，如果上移的元素中包含文本，文本会环绕在浮动元素的周围，多用于图文混排效果。</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">项目</th>
                        <th>格式</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">浮动设置</td>
                        <td>float: <strong>none</strong> | left | right;</td>
                        <td>left表示元素向左移动，right表示元素向右移动(见下表)，此属性在图片元素中设置</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">浮动清除</td>
                        <td>cear: <strong>none</strong> | left | right | both;</td>
                        <td>防止元素不必要的上移导致排版混乱(如下图所示)，此属性在文本元素中设置</td>
                    </tr>
                </tbody>
            </table>
            <p>浮动效果图示：</p>
            <img alt="" src="imgs/20250510154838571.png">
            <p>浮动方向说明：</p>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">方向</th>
                        <th>图示</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">未设置图片浮动</td>
                        <td><img alt="" src="imgs/20250510142921379.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">设置图片向左浮动<br>(float: left;)</td>
                        <td><img alt="" src="imgs/20250510142946510.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">设置图片向右浮动<br>(float: right;)</td>
                        <td><img alt="" src="imgs/20250510143144774.png"></td>
                    </tr>
                </tbody>
            </table>
            <h3>☆ “高度塌陷”问题及解决方法</h3>
            <p>元素设置为浮动后，父元素高度不能再根据子元素自适应拓展，即出现“高度塌陷”的问题。如下图所示：</p>
            <img alt="" src="imgs/20250510155836547.png">

            <p>为了解决这样的问题，可以给图片元素添加一个<strong>设置了浮动清除的非浮动兄弟元素</strong>(如<code>&lt;div style=" clear: both; height: 0px;"&gt;&lt;/div&gt;</code>)。
            </p>
            <img alt="" src="imgs/20250510160430183.png">
            <p>此时，父元素识别并根据兄弟元素进行高度拓展，解决了高度塌陷的问题。</p>
            <h3> ③ 定位排版(对网页元素进行精确定位)</h3>
            <p>定位方式：position: <strong>static</strong> | relative | absolute | fixed</p>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">模式</th>
                        <th style="text-align: center;">名称</th>
                        <th>描述</th>
                        <th>图示 (在各模式下，对box2应用右下方向各50px的偏移)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">static</td>
                        <td style="text-align: center;">静态定位</td>
                        <td>默认定位模式，元素按照标准流显示</td>
                        <td><img alt="" src="imgs/20250510171731756.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">relative</td>
                        <td style="text-align: center;">相对定位</td>
                        <td>元素以<strong>自身在标准流布局中的位置</strong>为基准进行定位，原有的位置会留空</td>
                        <td><img alt="" src="imgs/20250510171716066.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">absolute</td>
                        <td style="text-align: center;">绝对定位</td>
                        <td>元素以<strong>上一个已定位元素</strong>为基准进行定位，原有的位置不再保留，与基准元素堆叠在一起</td>
                        <td><img alt="" src="imgs/20250510171841117.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">fixed</td>
                        <td style="text-align: center;">固定定位</td>
                        <td>元素以<strong>浏览器窗口</strong>为基准进行定位，原有的位置不再保留，也不会随页面滚动(常用于侧边广告、"回到顶部"按钮等元素的固定)</td>
                        <td><img alt="" src="imgs/20250510173028487.png"></td>
                    </tr>
                </tbody>
            </table>
            <p>偏移量: 根据上述基准确定元素的准确位置(定位方式为<code>static</code>时，偏移量的设置无效)</p>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">项目</th>
                        <th>格式</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">左侧偏移量</td>
                        <td>left: 偏移值;</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">右侧偏移量</td>
                        <td>right: 偏移值;</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">顶部偏移量</td>
                        <td>top: 偏移值;</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">底部偏移量</td>
                        <td>bottom: 偏移值;</td>
                    </tr>
                </tbody>
            </table>
            <p>堆叠顺序：默认情况下，标准流中后出现的元素在上层。可以通过<code>z-index</code>属性调整堆叠关系。
            </p>
            <p>属性值可以是正数、<strong>0</strong>
                和负数。一般取<code>99</code>和<code>-99</code>来实现元素的置顶与置底效果。</p>
            <p>
                父元素的<code>z-index</code>无法与子元素进行比较；想让父元素显示在子元素上方，可以将子元素的<code>z-index</code>设为负值。</p>
            <h2 id="3flex">3.Flex布局<sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup></h2>
            <h3 id="1-flex">① Flex概述</h3>
            <blockquote>
                <p>布局的传统解决方案，基于<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">盒状模型</a>，依赖 <a
                        href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> 属性 + <a
                        href="https://developer.mozilla.org/en-US/docs/Web/CSS/position"><code>position</code></a>属性
                    + <a
                        href="https://developer.mozilla.org/en-US/docs/Web/CSS/float"><code>float</code></a>属性实现，不便于实现一些较为复杂(如垂直居中)的布局。<br>
                    2009年，<strong>W3C</strong>提出了一种新的方案 —— <strong>Flex(Flexible Box,
                        弹性盒布局)</strong>，可以简便、完整、响应式地为盒状模型提供灵活的布局，目前已经得到了所有浏览器的支持。</p>
            </blockquote>
            <h3 id="2_7">② 基本概念</h3>
            <ul>
                <li>采用Flex布局的元素称为<strong>Flex容器(Flex container)</strong>，简称
                    <strong>“容器”</strong>。容器的所有子元素成为其成员，称为<strong>Flex项目(Flex item)</strong>,简称 <strong>“项目”</strong>。
                </li>
                <li>容器默认存在两根轴：水平的<strong>主轴(main axis)</strong> 和 <strong>垂直的交叉轴(cross axis)</strong>。<ul>
                        <li>主轴的开始位置(与边框的交叉点)叫做 <strong><code>main start</code></strong> ，结束位置叫做
                            <strong><code>main end</code></strong>。
                        </li>
                        <li>交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</li>
                    </ul>
                </li>
                <li>项目默认沿主轴排列：<ul>
                        <li><code>main size</code>：单个项目占据的主轴空间</li>
                        <li><code>cross size</code>：单个项目占据的交叉轴空间</li>
                    </ul>
                </li>
                <li>Flex容器的各个概念如下图<sup id="fnref2:4"><a class="footnote-ref" href="#fn:4">4</a></sup>所示：<br>
                    <img alt="" src="imgs/20250511010807469.png">
                </li>
            </ul>
            <h3 id="3_4">③ 容器属性(设置在容器上,<a href="http://jack.jackafan.top/zsd/css/flex/">在线演示工具</a>)</h3>
            <h4 id="display-flex-flex">display: flex; 指定容器为Flex布局</h4>
            <ul>
                <li>使用 <code>display: inline-flex;</code> 的声明，可以将任何一个<strong>行内元素</strong>指定为Flex布局。</li>
                <li>在<strong>WebKit内核的浏览器</strong>(如Safari、iOS版本的Chrome和Edge)上使用Flex布局，应该使用
                    <code>display: -webkit-flex;</code>
                    这样的声明。
                </li>
                <li>设为Flex布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</li>
            </ul>
            <h4 id="flex-direction">flex-direction属性：主轴方向(项目布局方向)</h4>
            <table>
                <thead>
                    <tr>
                        <th>取值</th>
                        <th>row</th>
                        <th>row-reverse</th>
                        <th>column</th>
                        <th>column-reverse</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>从左往右，默认</td>
                        <td>从右往左</td>
                        <td>从上到下</td>
                        <td>从下到上</td>
                    </tr>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250511150748743.png"></td>
                        <td><img alt="" src="imgs/20250511150834951.png"></td>
                        <td><img alt="" src="imgs/20250511150850869.png"></td>
                        <td><img alt="" src="imgs/20250511151756443.png"></td>
                    </tr>
                </tbody>
            </table>
            <h4 id="flex-wrap">flex-wrap属性: 内容换行</h4>
            <table>
                <thead>
                    <tr>
                        <th>取值</th>
                        <th>nowrap</th>
                        <th>wrap</th>
                        <th>warp-reverse</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>不换行(宽度不足时挤压内容的宽度)，默认</td>
                        <td>向下换行(新的一行在下方)</td>
                        <td>向上换行(新的一行在上方)</td>
                    </tr>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250511152039858.png"></td>
                        <td><img alt="" src="imgs/20250511152051854.png"></td>
                        <td><img alt="" src="imgs/20250511152110422.png"></td>
                    </tr>
                    <tr>
                        <td>#### justify-content属性: 主轴对齐</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table>
                <thead>
                    <tr>
                        <th>取值</th>
                        <th>flex-start</th>
                        <th>flex-end</th>
                        <th>center</th>
                        <th>space-between</th>
                        <th>space-evenly</th>
                        <th>space-around</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>对齐主轴起点，默认</td>
                        <td>对齐主轴终点</td>
                        <td>居中对齐</td>
                        <td>分散对齐，两边紧贴</td>
                        <td>分散对齐，间距相同</td>
                        <td>分散对齐，两端间距减半</td>
                    </tr>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250511152945287.png"></td>
                        <td><img alt="" src="imgs/20250511153011486.png"></td>
                        <td><img alt="" src="imgs/20250511153046737.png"></td>
                        <td><img alt="" src="imgs/20250511153113530.png"></td>
                        <td><img alt="" src="imgs/20250511153133123.png"></td>
                        <td><img alt="" src="imgs/20250511153148211.png"></td>
                    </tr>
                    <tr>
                        <td>#### align-items属性: 单行交叉轴对齐</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table>
                <thead>
                    <tr>
                        <th>取值</th>
                        <th>flex-start</th>
                        <th>flex-end</th>
                        <th>center</th>
                        <th>baseline</th>
                        <th>stretch</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>对齐交叉轴起点</td>
                        <td>对齐交叉轴终点</td>
                        <td>居于交叉轴为中心分布</td>
                        <td>对齐首行文字</td>
                        <td>若内容未设高度或设为auto，<br>占满父容器高度，默认</td>
                    </tr>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250511153903434.png"></td>
                        <td><img alt="" src="imgs/20250511153941526.png"></td>
                        <td><img alt="" src="imgs/20250511154446756.png"></td>
                        <td><img alt="" src="imgs/20250511154036067.png"></td>
                        <td><img alt="" src="imgs/20250511154057001.png"></td>
                    </tr>
                </tbody>
            </table>
            <h4 id="align-content">align-content属性: 多行交叉轴对齐</h4>
            <table>
                <thead>
                    <tr>
                        <th>取值</th>
                        <th>stretch</th>
                        <th>flex-start</th>
                        <th>flex-end</th>
                        <th>center</th>
                        <th>space-between</th>
                        <th>space-evenly</th>
                        <th>space-around</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>默认布局</td>
                        <td>对齐顶部</td>
                        <td>对齐底部</td>
                        <td>居中对齐</td>
                        <td>分散对齐，两边紧贴</td>
                        <td>分散对齐，间距相同</td>
                        <td>分散对齐，两端间距减半</td>
                    </tr>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250511154703419.png"></td>
                        <td><img alt="" src="imgs/20250511154723483.png"></td>
                        <td><img alt="" src="imgs/20250511154745362.png"></td>
                        <td><img alt="" src="imgs/20250511154801722.png"></td>
                        <td><img alt="" src="imgs/20250511154818665.png"></td>
                        <td><img alt="" src="imgs/20250511154844911.png"></td>
                        <td><img alt="" src="imgs/20250511154903196.png"></td>
                    </tr>
                </tbody>
            </table>
            <h4 id="f12flex">☆ 在F12开发人员工具中快捷调整Flex布局的容器属性：</h4>
            <p>对于上述的属性，在Chrome中F12打开开发人员工具后，在“样式”部分指定某个容器为Flex布局时，会自动出现调整各项参数的窗口，调整后将新的样式复制到源码中即可("开发人员工具"只可临时修改，无法修改源代码内容)。<br>
                <img alt="" src="imgs/20250511020013795.png">
            </p>
            <h3 id="4_2">④ 项目属性(设置在项目上)</h3>
            <h4 id="order">order属性：定义项目的排列顺序</h4>
            <ul>
                <li>可以为负整数值、0和正整数值，默认为0。</li>
                <li>使用方法类似于<code>z-index</code>属性，可以分别用-99,99来让某个元素置为最后一个和第一个。</li>
            </ul>
            <h4 id="flex-basis">flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间</h4>
            <ul>
                <li>默认值为<code>auto</code>，即项目的本来大小。浏览器根据此属性计算主轴是否有多余空间。</li>
                <li>也可以设置为固定的数值，使项目占用固定的空间。</li>
            </ul>
            <h4 id="flex-grow">flex-grow属性：定义项目的空间占用比例</h4>
            <ul>
                <li>默认为0，不放大(不等分剩余空间)<ul>
                        <li>若所有项目的<code>flex-grow</code>属性都为1，则它们将等分剩余空间</li>
                        <li>若某项目的<code>flex-grow</code>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</li>
                        <li><img alt="" src="imgs/20250511155930309.png"></li>
                    </ul>
                </li>
            </ul>
            <h4 id="fiex-shrink">fiex-shrink属性：定义项目的缩小比例</h4>
            <ul>
                <li>默认缩小比例为1，若空间不足，项目会缩小宽度或高度。设为负值无效。<ul>
                        <li>若所有项目的<code>flex-shrink</code>属性都为1，当空间不足时，都将等比例缩小。</li>
                        <li>若某项目的<code>flex-shrink</code>属性为0，其他项目都为1，则空间不足时，前者不缩小。</li>
                        <li><img alt="" src="imgs/20250511160146988.png"></li>
                    </ul>
                </li>
            </ul>
            <h4 id="flex">flex属性：同时定义项目占用空间及缩放比例</h4>
            <ul>
                <li>格式：<code>flex: flex-grow属性值 flex-shrink属性值 flex-basis属性值;</code></li>
                <li>两个快捷值：<ul>
                        <li><code>auto</code>：1 1 auto（项目大小为内容原本大小，等分剩余空间，允许缩小）。</li>
                        <li><code>none</code>：0 0 auto（项目大小为内容原本大小，不等分空间，不允许缩小）。</li>
                    </ul>
                </li>
            </ul>
            <h4 id="align-self">align-self属性：允许单个项目有与其他项目不一样的对齐方式</h4>
            <ul>
                <li>设置此属性后，会覆盖掉容器设定的<code>align-items</code>属性。</li>
                <li>默认值为<code>auto</code>，继承容器定义的<code>align-items</code>属性(若无父元素则自动设为<code>stretch</code>).</li>
            </ul>
            <h2 id="4grid">4.Grid布局<sup id="fnref:5"><a class="footnote-ref" href="#fn:5">5</a></sup></h2>
            <h3 id="1-grid">① Grid概述</h3>
            <blockquote>
                <p><strong>网格布局(Grid)</strong> 是很强大的CSS布局方案,通过将网页划分并组合不同的网格，实现各种各样的布局。<br>
                    Flex 布局是<strong>轴线布局</strong>，只能指定"项目"针对轴线的位置，可以看作是一维布局。<br>
                    Grid 布局则是将容器划分成"行"和"列"，产生<strong>单元格</strong>，然后指定"项目所在"的单元格，可以看作是二维布局。</p>
            </blockquote>
            <h3 id="2_8">② 基本概念</h3>
            <h4 id="_1">容器与项目</h4>
            <pre class="codehilite"><code class="language-HTML">&lt;div&gt;
  &lt;div&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;
  &lt;div&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;
  &lt;div&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

            <ul>
                <li><strong>容器(container)</strong>：指采用网格布局的区域。</li>
                <li><strong>项目(item)</strong>：容器内部采用网格定位的<strong>顶层</strong>子元素。</li>
                <li>
                    在上面的示例中，父元素<code>&lt;div&gt;</code>是容器，子元素<code>&lt;div&gt;</code>是项目；但是<code>&lt;p&gt;</code>不属于Grid容器的项目(不是父元素的顶层子元素)。
                </li>
                <li>Grid布局只对容器内的项目生效。</li>
            </ul>
            <h4 id="_2">行与列</h4>
            <ul>
                <li>容器里面的水平区域称为<strong>行(row)</strong>，垂直区域称为<strong>列(column)</strong>。各行与各列的重叠部分组成一些<strong>单元格(cell)</strong>。
                </li>
                <li>划分网格的线，称为<strong>网格线(grid line)</strong>。水平网格线划分出行，垂直网格线划分出列。</li>
            </ul>
            <h3 id="3_5">③ 容器属性(设置在容器上,<a href="https://jsbin.com/mezufab/edit?html,css,output">在线演示工具</a>)</h3>
            <h4 id="display-grid-grid">display: grid; 指定容器为Grid网络布局</h4>
            <ul>
                <li>
                    设为网格布局以后，容器项目的<code>float</code>、<code>display: inline-block</code>、<code>display: table-cell</code>、<code>vertical-align</code>和<code>column-*</code>等设置都将失效。
                </li>
                <li>指定为Grid布局后，默认设定为块级元素；可以通过<code>display: inline-grid;</code>的声明设定为行内元素，如图所示：<br>
                    <img alt="" src="imgs/20250511211409402.png">
                </li>
            </ul>
            <h4 id="grid-template-columnsgrid-template-rows">grid-template-columns和grid-template-rows属性</h4>
            <ul>
                <li>分别用于指定网络布局每一列的宽度和每一行的高度()，定义了几个值就有几行/几列。如图所示：<br>
                    <img alt="" src="imgs/20250511212138947.png">
                </li>
                <li>
                    宽度/高度可以是固定的<code>px</code>值，可以是相对的<code>%</code>值，也可以是相对的<code>fr</code>值，表示均分容器宽高的权重(总宽高为容器的宽高，各自的宽高比例为<code>fr</code>的值；类似于WPF中的<code>&lt;RowDefinition Height="2*"&gt;</code>，<a
                        href="https://jsbin.com/gugunosofa/edit?html,css,output">点击查看示例</a>)</li>
                <li>网格很多时，重复写多个值很不方便，可以使用<code>repeat(重复次数， 宽度/高度值)</code>方法批量定义多个行和列：</li>
            </ul>
            <pre class="codehilite"><code class="language-css">.container1 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}
</code></pre>

            <ul>
                <li><code>repeat()</code>的参数说明：<ul>
                        <li>
                            第二个参数也可以是多个值，表示重复的模式，如<code>grid-template-rows: repeat(2, 20px 40px 60px);</code>，此时列宽为<code>20 40 60 20 40 60</code>
                        </li>
                        <li>第一个参数可以是关键字<code>auto-fill</code>，此时容器会根据容器宽度决定列数，实现<strong>响应式布局</strong>的效果，<a
                                href="https://jsbin.com/zuvinerezo/edit?html,css,output">点击查看示例</a><br>
                            <img alt="" src="imgs/20250511214655531.png">
                        </li>
                    </ul>
                </li>
                <li><code>minmax(最小值，最大值)</code>方法可用于设定行(列)的最小(大)的宽度和高度,
                    如<code>grid-template-rows: 1fr 1fr minmax(100px, 1fr);</code></li>
                <li><code>auto关键字</code>表示自动设定宽高，在没有设定取值范围时取最大的宽度或高度。</li>
                <li>
                    可以使用<strong>方括号</strong>指定各行各列的名称，方便后续引用(可以定义多个名称)，如<code>grid-template-rows: [first-row r1] 100px [r2] 100px [r3] auto [r4];</code>
                </li>
            </ul>
            <h4 id="grid-gap">grid-gap属性：设置行之间、列之间的间隔(行间距与列间距)</h4>
            <ul>
                <li>使用<code>grid-column-gap</code>与<code>grid-row-gap</code>分别设置列间距与行间距。</li>
                <li>两个属性可以合写成<code>grid-gap: 行间距 列间距;</code>的形式。</li>
            </ul>
            <h4 id="grid-template-areas">grid-template-areas属性：设置网格中的区域</h4>
            <ul>
                <li>一个 <strong>区域(area)</strong> 可以包括多个单元格，每个区域对应单独的一个板块。</li>
            </ul>
            <pre class="codehilite"><code class="language-css">.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
</code></pre>

            <ul>
                <li>在上面的示例中，定义了3*3的网络布局，将九个单元格分配给了九个区域。</li>
                <li>若写成<code>grid-template-areas: 'a a a' 'b b b' 'c c c';</code>，会将Grid布局划分成三个区域，每个区域占据同一行的三个单元格。</li>
                <li>
                    若存在不需要使用的单元格，在<code>grid-templlate-areas</code>属性中使用<code>.</code>号进行置空，如<code>grid-template-areas: 'a . a' 'b . b' 'c . c';</code>,这样中间的一列就不会被分配给任何一个区域。
                </li>
                <li>区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为<strong>区域名-start</strong>，终止网格线自动命名为<strong>区域名-end</strong>。</li>
            </ul>
            <h4 id="grid-auto-flow">grid-auto-flow属性：指定先行后列还是先列后行</h4>
            <ul>
                <li>格式：<code>grid-auto-flow: row(先行后列，默认) | column(先列后行);</code></li>
                <li>此属性还可以设置成<code>row dense</code>和<code>column dense</code>，用于指定项目的放置方式：</li>
            </ul>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">grid-auto-flow属性值</th>
                        <th>row</th>
                        <th>row dense</th>
                        <th>column dense</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">描述</td>
                        <td>默认的先行后列布局</td>
                        <td>后面较小的网格项会自动“回填”前面的空白，优先填充前面的行。</td>
                        <td>如果某列有空白，后面较小的网格项会自动“回填”前面的空白，优先填充前面的列。</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">布局效果</td>
                        <td><img alt="" src="imgs/20250512074248914.png"></td>
                        <td><img alt="" src="imgs/20250512074342139.png"></td>
                        <td><img alt="" src="imgs/20250512074413862.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">####
                            justify-items属性、align-items属性、place-items属性：设置单元格内容的水平位置与垂直位置</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <pre class="codehilite"><code class="language-css">.container {
    /*起点对齐 | 终点对齐 | 居中对齐 | 两端对齐*/
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    /*合并简写形式*/
    place-items: &lt;align-items&gt; &lt;justify-items&gt;;
}
</code></pre>

            <h4 id="justify-contentalign-contentplace-content">
                justify-content属性、align-content属性、place-content属性：整个内容区域在容器中的水平位置与垂直位置</h4>
            <pre class="codehilite"><code class="language-css">.container {
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    /*合并简写形式*/
    place-content: &lt;align-content&gt; &lt;justify-content&gt;;
}
</code></pre>

            <p>属性取值(以justify-content为例)的说明：</p>
            <table>
                <thead>
                    <tr>
                        <th>属性值</th>
                        <th>start</th>
                        <th>end</th>
                        <th>center</th>
                        <th>stretch</th>
                        <th>space-around</th>
                        <th>space-between</th>
                        <th>space-evenly</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>描述</td>
                        <td>对齐起点，默认</td>
                        <td>对齐终点</td>
                        <td>居中对齐</td>
                        <td>拉伸并占满宽度</td>
                        <td>分散对齐，两端间距减半</td>
                        <td>分散对齐，两边紧贴</td>
                        <td>分散对齐，间距相同</td>
                    </tr>
                    <tr>
                        <td>图示效果</td>
                        <td><img alt="" src="imgs/20250512082542274.png"></td>
                        <td><img alt="" src="imgs/20250512082547395.png"></td>
                        <td><img alt="" src="imgs/20250512082553724.png"></td>
                        <td><img alt="" src="imgs/20250512082600882.png"></td>
                        <td><img alt="" src="imgs/20250512082904959.png"></td>
                        <td><img alt="" src="imgs/20250512082844649.png"></td>
                        <td><img alt="" src="imgs/20250512082854955.png"></td>
                    </tr>
                </tbody>
            </table>

            <h4>grid-auto-columns属性、grid-auto-rows属性：指定浏览器自动创建多余的单元格，来容纳在现有网格外部的项目</h4>
            <img alt="" src="imgs/20250512083905557.png">

            <h4>grid-template属性、grid-属性：是一些grid属性的简写，会降低可读性，不推荐使用。</h4>

            <h3>④ 项目属性(设置在项目上)</h3>

            <h4>grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性：设置项目的单元格范围</h4>
            <ul>
                <li>这些属性可以用于控制单元格的起始行列与结束行列，实现项目跨越单元格(占据多个单元格)的布局。</li>
                <li>设置为数值时，表示网格线的编号(从1开始)，即若行设置为4-6，列设置为2-5，面积为(6-4)*(5-4) = 2*3 = 6</li>
                <li>如上图中的<code>item8</code>与<code>item9</code>，位置在九个单元格以外就是通过这些属性控制的：</li>
            </ul>
            <pre class="codehilite"><code class="language-css">.item-8 {
    background-color: #d0e4a9;
    grid-row-start: 4;                /* 第八个项目从第四行，第二列开始 */
    grid-column-start: 2;             /* 无end属性,默认只占一格单元格,面积为1 */
/* grid-row-end: 6; 若设置此属性，会纵跨两个单元格，占据第四行到第五行的区域，面积变为1*2 = 2 */
/* grid-column-end: 5; 若设置此属性，会横跨两个三元格，占据第二列到第四列的区域，面积变为3*2 = 6 */
}
</code></pre>

            <ul>
                <li>若项目出现重叠，可以通过<code>z-index</code>属性调整层级关系。</li>
                <li>属性值可以是数值，也可以是网格线的名称，如<code>grid-column-start: header-start;</code></li>
                <li>可以使用<code>span</code>关键字，设置项目的跨越单元格，如<code>grid-column-start: span 2;</code>，表示项目横跨两列。</li>
            </ul>
            <h4 id="grid-columngrid-row">grid-column属性、grid-row属性：上面四个属性的简写形式</h4>
            <pre class="codehilite"><code class="language-css">.item {
  grid-column: &lt;start-line&gt; / &lt;end-line&gt;;
  grid-row: &lt;start-line&gt; / &lt;end-line&gt;;
}

/* 示例：一个2*2的项目 */
.item-1 {
  grid-column: 1 / 3;  /* 也可以写成 grid-column: 1 / span 2; */
  grid-row: 1 / 3;     /* 也可以写成 grid-row: 1 / span 2; */
}
</code></pre>

            <h4 id="grid-area">grid-area属性：指定项目放在哪一个区域</h4>
            <pre class="codehilite"><code class="language-css">.item-1 {
    /*容器设置了grid-template-areas: 'a b c' 'd e f' 'g h i'的属性; */
    grid-area: e;    /* 对应上面编号为e的区域，分布在第二行第二列的单元格 */
}
</code></pre>

            <ul>
                <li>
                    此属性也可作为<code>grid-row-start</code>等四个属性的简写，格式为<code>grid-area: &lt;row-start&gt; / &lt;column-start&gt; / &lt;row-end&gt; / &lt;column-end&gt;;</code>
                    <ul>
                        <li>例：<code>grid-area: 1 / 1 / 3 / 3;</code></li>
                    </ul>
                </li>
            </ul>
            <h4 id="justify-selfalign-selfplace-self">justify-self属性、align-self属性、place-self属性</h4>
            <pre class="codehilite"><code class="language-css">.item {
    /*起点对齐 | 终点对齐 | 居中对齐 | 两端对齐*/
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
    /* 简写成place-self属性 */
    place-self: &lt;align-self&gt; &lt;justify-self&gt;;
}
</code></pre>

            <h2 id="5">5.常见网页版式</h2>
            <table>
                <thead>
                    <tr>
                        <th>版式</th>
                        <th>单栏版式</th>
                        <th>双栏版式</th>
                        <th>三栏版式</th>
                        <th>综合版式(1+2+1)</th>
                        <th>综合版式(1+3+1)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>图示</td>
                        <td><img alt="" src="imgs/20250512094504626.png"></td>
                        <td><img alt="" src="imgs/20250512094521485.png"></td>
                        <td><img alt="" src="imgs/20250512094606474.png"></td>
                        <td><img alt="" src="imgs/20250512094849246.png"></td>
                        <td><img alt="" src="imgs/20250512095017107.png"></td>
                    </tr>
                </tbody>
            </table>
            <h2 id="6">6.响应式布局</h2>
            <h3 id="1_6">① 概述</h3>
            <blockquote>
                <p><strong>响应式设计(Responsive Web Design,
                        RWD)</strong> 是一种网页开发方法，使网站能够<strong>自动适应不同屏幕尺寸的设备（PC、平板、手机等）</strong>，提供最佳浏览体验。<br>
                    响应式设计 = <strong>弹性布局 + 媒体查询 + 移动优先 +
                        灵活媒体</strong>，确保网站在任何设备上都能完美展现，能实现<strong>一套代码适配所有设备</strong>，降低维护成本；同时<strong>提升用户体验</strong>，避免手机端缩放、滚动问题；并且<strong>SEO友好</strong>，便于搜索引擎快速检索网页信息。
                </p>
            </blockquote>
            <h3 id="2_9">② 弹性布局</h3>
            <ul>
                <li>使用 <strong>弹性网格(Flex布局/Grid布局)</strong> 和 <strong>百分比宽度</strong> 替代固定像素布局，多使用相对单位进行布局。</li>
            </ul>
            <pre class="codehilite"><code class="language-css">.container {
  width: 100%; /* 宽度自适应 */
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 居中 */
}
</code></pre>

            <h3 id="3_6">③视口</h3>
            <ul>
                <li>视口即<strong>浏览器显示页面内容的屏幕区域</strong>,一般认为是浏览器的窗口大小。</li>
                <li>通过设置视口大小，无论网页原始的分辨率如何，都能将其缩小显示在移动端的浏览器上，避免出现很长的滚动条。</li>
                <li>在移动端浏览器中，存在三种视口：<strong>布局视口(layout viewport)、视觉视口(visual viewport)与理想视口(ideal viewport)</strong>。
                </li>
            </ul>
            <h4 id="_3">布局视口(网页文件实际的尺寸)</h4>
            <p><img alt="" src="imgs/20250512102506430.png"><br>
                - 布局视口指整个文件的内容，与文档的宽度相关。<br>
                - 在移动设备上，为了避免桌面网页在小屏幕上显示过小，通常会默认设置一个宽布局视口（768px、980px、1024px等）。<br>
                - 通过<code>&lt;meta name="viewport"&gt;</code>标签设置布局视口的宽度，例如width=device-width将其设置为设备屏幕的宽度。<br>
                - 布局视口决定了CSS像素的渲染范围，影响元的排列和缩放。</p>
            <h4 id="_4">视觉视口(设备屏幕的尺寸)</h4>
            <p><img alt="" src="imgs/20250512102521290.png"><br>
                - 视觉视口是用户在屏幕上实际看到的区域，也就是浏览器窗口中显示的内容范围。<br>
                - 大小通常与设备屏幕的像素尺寸相关，且会随着用户的缩放而改变。<br>
                - 例如，放大页面时，视觉视口变小，显示的布局视口内容减少；缩小页面时，视觉视口变大，显示更多内容。<br>
                - 反映用户当前的可见区域，与缩放操作直接相关。</p>
            <h4 id="_5">理想视口</h4>
            <ul>
                <li>理想视口是设备的最佳视口尺寸，通常等于设备的屏幕宽度（以设备独立像素为单位）。</li>
                <li>用于让网页在移动设备上以最自然、最舒适的方式显示。</li>
                <li>
                    通过设置<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>，可以让布局视口匹配理想视口，避免页面缩放或水平滚动。
                </li>
                <li>可以为移动端优化页面，提供最佳用户体验。</li>
            </ul>
            <h4 id="_6">视口的设置</h4>
            <ul>
                <li>通用格式：<code>&lt;meta name="viewport" content="属性1 = 值1, 属性2 = 值2, …"&gt;</code>
                    <ul>
                        <li><code>name</code>属性值为<code>viewport</code>，表明此标签用于设置视口</li>
                        <li><code>content</code>属性用于设定布局视口的相关属性：<ul>
                                <li><code>width</code>:
                                    用于设定布局视口的宽度，属性值为正整数(px)或<code>device-width</code>;设置为后者时，布局视口的宽度等于屏幕宽度(即理想视口)。</li>
                                <li><code>height</code>:
                                    用户设定布局视口的高度，属性值为正整数(px)或<code>device-height</code>;设置为后者时，布局视口的高度等于屏幕高度(即理想视口)。
                                </li>
                                <li><code>user-scalable</code>: 是否允许手动缩放，默认为<code>yes</code>，可设置为<code>no</code>。</li>
                                <li><code>initial-scale</code>: 网页初始缩放值，取值范围0.0 ~ 10.0，一般取1.0，表示网页的原大小。</li>
                                <li><code>maximum-scale</code>: 设置缩放的最大比例，取值范围0.0 ~ 10.0</li>
                                <li><code>minimum-scale</code>: 设置缩放的最小比例，取值范围0.0 ~ 10.0</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <h3 id="4_3">④ 媒体查询</h3>
            <ul>
                <li>用于根据设备的特性（如屏幕宽度、分辨率、方向等）应用不同的样式，以实现响应式设计。</li>
                <li>通过@media规则，检测设备的特定条件（如min-width、max-width、屏幕方向等），然后应用对应的CSS样式，常用于适配不同屏幕尺寸的设备。</li>
                <li>语法：</li>
            </ul>
            <pre class="codehilite"><code class="language-css">@media 媒体类型 and | not | only (条件) { /* CSS样式 */}
</code></pre>

            <ul>
                <li>参数说明：<ul>
                        <li>媒体类型：取值有<code>all</code>(所有设备)、<code>screen</code>(电脑屏幕)、<code>print</code>(打印机)、<code>speech</code>(屏幕阅读器)
                        </li>
                        <li>条件常用取值：<code>max-width、min-width</code>、<code>max-device-width</code>、<code>min-device-width</code>等
                        </li>
                    </ul>
                </li>
            </ul>
            <p>例：当输出设备中的页面最大可见&#8203;区域宽度为900px时，bod&#8203;y元素背景颜色切换为蓝色：</p>
            <pre class="codehilite"><code class="language-css">@media screen and (max-width: 900px) {
    body{
        background-color: blue;
    }
}
</code></pre>

            <p>在实际网页制作中，通常根据不同的屏幕宽度创建不同的样式表文件，然后在网页头部标签中添加<code>&lt;link&gt;</code>标签，使网页根据屏幕宽度响应式加载不同的样式文件, 语法格式如下：</p>
            <pre class="codehilite"><code class="language-html">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;媒体类型 and | not | only (条件)&quot; href=&quot;CSS文件路径&quot; /&gt;
</code></pre>

            <p>
                备注：使用<code>&lt;meta&gt;</code>标签的<code>media</code>属性让网页加载新的样式表文件时，可能需要对某些元素重复设置样式，应该尽量使用优先级较高的选择器，减少通配符或者大范围选择器的使用。
            </p>
            <h3 id="5_1">⑤ 其他技巧</h3>
            <h4 id="_7">为元素设置最大尺寸，防止溢出</h4>
            <ul>
                <li>为图片设置<code>max-width: 100%; height: auto;</code>的属性，防止大小超过容器或父元素的区域</li>
                <li>为移动端横屏与竖屏应用不同的样式</li>
            </ul>
            <pre class="codehilite"><code class="language-css">/* 手机端或竖屏的样式 */
@media (max-width: 767px) {
  .menu { display: none; } /* 小屏幕隐藏菜单 */
}

/* 平板端或横屏的样式 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 30%; }
}
</code></pre>

            <hr>
            <h1 id="css3_4">五、CSS3变形</h1>
            <blockquote>
                <p>早期的CSS无法实现变形效果，只能通过JavaScript实现。CSS3中新增了<code>transform</code>属性用于设置元素的2D和3D变形效果。 </p>
            </blockquote>
            <ul>
                <li>具体格式：</li>
            </ul>
            <pre class="codehilite"><code class="language-css">transform: none | transform-functions
</code></pre>

            <ul>
                <li>默认值为<code>none</code>(无变形效果)，<code>transform-functions</code>表示变形方法，用于设置元素的2D或3D变形效果</li>
                <li>变形方法可以有多个，用空格隔开。</li>
            </ul>
            <h2 id="12d">1.2D变形</h2>
            <h4 id="1_7">① 概述</h4>
            <ul>
                <li>以元素中心为原点创建一个平面直角坐标系，取右下方为正方向，2D变形主要有四种方法：<strong>平移、缩放、旋转和倾斜</strong>。<br>
                    <img alt="" src="imgs/20250512193100490.png">
                </li>
            </ul>
            <h4 id="2-translate">② 平移：translate()方法</h4>
            <pre class="codehilite"><code class="language-css">transform: translate(x轴偏移量, y轴偏移量);
</code></pre>

            <ul>
                <li>参数可以为正值与负值，单位可以取<code>px</code>等绝对单位，也可以是<code>%</code>等相对单位。</li>
                <li>若只设置一个参数，y轴偏移量默认为0。</li>
            </ul>
            <h4 id="3-scale">③ 缩放：scale()方法</h4>
            <pre class="codehilite"><code class="language-css">transform: translate(宽度缩放倍数, 高度缩放倍数);
</code></pre>

            <ul>
                <li>参数值大于1表示放大，小于1表示缩小。</li>
                <li>若只设置一个参数，表示宽高以相同倍数缩放。</li>
                <li>参数为负时，元素会有翻转效果。</li>
            </ul>
            <h4 id="4-rotate">④ 旋转：rotate()方法</h4>
            <pre class="codehilite"><code class="language-css">transform: rotate(旋转角度);
</code></pre>

            <ul>
                <li>旋转角度以<code>°</code>为单位，正值表示顺时针旋转，负值表示逆时针旋转。</li>
            </ul>
            <h4 id="5-skew">⑤ 倾斜：skew()方法</h4>
            <pre class="codehilite"><code class="language-css">transform: skew(y轴倾斜角度, x轴倾斜角度);
</code></pre>

            <ul>
                <li>与旋转方法的参数规则相同，以<code>°</code>为单位，正顺负逆。</li>
                <li>若只设置一个值，元素绕y轴倾斜，第二个值默认为0。<br>
                    <img alt="" src="imgs/20250512194434661.png">
                </li>
            </ul>
            <h3 id="6-2d">⑥ 2D变形效果图示</h3>
            <p><img alt="" src="imgs/20250512194917256.png"></p>
            <h2 id="23d">2.3D变形</h2>
            <h3 id="1_8">① 概述</h3>
            <ul>
                <li>以元素中心为原点，创建三维直角坐标系</li>
                <li>3D变形主要沿元素的<code>x,y,z</code>三轴进行变化</li>
                <li>3D变形主要有三种，分别为<strong>平移、缩放与旋转</strong>。<br>
                    <img alt="" src="imgs/20250512200903849.png">
                </li>
            </ul>
            <h3 id="2-translate3d">② 平移：translate3d()方法</h3>
            <pre class="codehilite"><code class="language-css">transform: translate3d(x轴偏移量, y轴偏移量, z轴偏移量);
</code></pre>

            <ul>
                <li>x、y轴上的偏移量可以为百分比，但是z轴不允许设置百分比单位。三个值均可取负。</li>
                <li>z轴偏移量越大，元素看起来越靠近浏览者，反之则相反。</li>
            </ul>
            <h3 id="3-scale3d">③ 缩放：scale3d()方法</h3>
            <pre class="codehilite"><code class="language-css">transform: Scale3d(x方向缩放比例, y方向缩放比例, z方向缩放比例);
</code></pre>

            <ul>
                <li>参数值大于1表示放大，小于1表示缩小。</li>
                <li>若只设置一个参数，表示宽高以相同倍数缩放。</li>
                <li>参数为负时，元素会有翻转效果。</li>
            </ul>
            <h3 id="4-rotatexrotateyrotatez">④ 旋转：rotateX()方法、rotateY()方法、rotateZ()方法</h3>
            <pre class="codehilite"><code class="language-css">/* 分别绕x、y、z三轴旋转10度 */
transform: rotateX(10deg) | rotateY(10deg) | rotateZ(10deg);
</code></pre>

            <ul>
                <li>旋转角度以<code>°</code>为单位，正值表示顺时针旋转，负值表示逆时针旋转。</li>
            </ul>
            <h3 id="5-3d">⑤ 3D变形效果图示</h3>
            <p><img alt="" src="imgs/20250512201644433.png"></p>
            <blockquote id="3dperspective-css3300px03d2d-webp184">&gt;
                “设置3D变形时，—般需要为设置变形的元素的父元素设置透视属性(perspective)。透视是绘画理论术语，是在平面上根据一定原理用线条来显示物体的空间位置、轮廓和
                投影的科学，根据透视关系能够绘制出带有空间结构的透视图，生活中常说的‘近大远
                小’就是其中的一个简单的原理。CSS3中的透视属性可以理解为设置‘近大远小’的程度，属性值越小靠近人眼的一侧就显示得越大，一般设置为300px。该属性的默认属性值为0，即不显示透视，此时3D变形效果类似于2D变形效果。”
                ——《Web前端技术》P184</blockquote>
            <hr />
            <h1 id="css3_5">六、CSS3过渡</h1>
            <h2 id="1_9">1.过渡的相关属性</h2>
            <h3 id="1-transition-property">① transition-property属性：过渡属性</h3>
            <pre class="codehilite"><code class="language-css">transition-property: none | all | property;
</code></pre>

            <ul>
                <li><code>none</code>:默认值，不使用过渡效果。</li>
                <li><code>all</code>:为所有属性设置过渡效果。</li>
                <li><code>property</code>:应用过渡效果的具体属性名称，多个值之间用空格隔开。</li>
            </ul>
            <h3 id="2-transition-duration">② transition-duration属性：过渡时间</h3>
            <pre class="codehilite"><code class="language-css">transition-duration: 过渡时间;
</code></pre>

            <ul>
                <li>取值一般为过渡的时间，以秒(s)或毫秒(ms)为单位，默认值为0。</li>
                <li>若不设置过渡的时间，会直接显示变形的最终效果，变形的过程几乎看不到。</li>
            </ul>
            <h3 id="3-transition-timing-function">③ transition-timing-function属性：过渡速度曲线</h3>
            <pre class="codehilite"><code class="language-css">transition-timing-function: liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
</code></pre>

            <ul>
                <li><code>liner</code>：线性过渡，即<strong>匀速</strong>进行过渡。</li>
                <li>
                    <code>ease</code>：平滑过渡，<strong>慢-快-慢</strong>的过渡效果，类似汽车<strong>快速启动-逐渐减速</strong>过程，适合<strong>快速响应</strong>(如按钮悬停)的过渡场景。
                </li>
                <li><code>ease-in</code>：<strong>慢-快</strong>的过渡效果。</li>
                <li><code>ease-out</code>：<strong>快-慢</strong>的过渡效果。</li>
                <li>
                    <code>ease-in-out</code>：<strong>慢-快-慢</strong>的过渡效果，类似于垂直电梯的<strong>缓慢启动-匀速上升-缓慢减速</strong>过程，适合<strong>平滑连贯</strong>(如页面切换)的过渡场景。
                </li>
                <li><code>cubic-bezier(n, n, n, n)</code>：贝赛尔曲线,用于精确控制过渡效果的曲线，<code>n</code>取值范围为0 ~ 1。</li>
            </ul>
            <h4 id="chromef12">在Chrome的F12开发人员工具中调整贝赛尔曲线：</h4>
            <ol>
                <li>打开开发人员工具中的贝赛尔曲线编辑器：<br>
                    <img alt="" src="imgs/20250512214550419.png">
                </li>
                <li>在编辑器中调整速度曲线或者使用下方的一些预设进一步微调<br>
                    <img alt="" src="imgs/20250512214717163.png">
                </li>
                <li>调节完成后，关闭编辑器窗口并将新的<code>cubic-bezier</code>属性值粘贴到源文件，完成速度曲线的修改。</li>
            </ol>
            <h3 id="4-transition-delay">④ transition-delay属性：延迟时间</h3>
            <pre class="codehilite"><code class="language-css">transition-delay: 延迟时间;
</code></pre>

            <ul>
                <li>取值一般为延迟的时间值，以秒(s)或毫秒(ms)为单位，默认值为0。</li>
                <li>
                    设定为负值时，会截断过渡时间开头的一部分。如<code>duration</code>设置为<code>5s</code>，<code>delay</code>设置为<code>-2s</code>时，过渡效果会在触发后延迟2s，并从动画的第二秒开始过渡。
                </li>
            </ul>
            <h3 id="5-transition">⑤ transition属性：综合声明上述各个属性</h3>
            <pre class="codehilite"><code class="language-css">transition: property值 duration值 timing-function值 delay值;
</code></pre>

            <ul>
                <li>属性值的顺序不可颠倒，每组属性值用逗号隔开。</li>
            </ul>
            <h2 id="2_10">2.过渡的触发方式</h2>
            <blockquote>
                <p>在CSS中，常通过鼠标事件触发&#8203;过渡效果，如单机按钮、指针悬浮&#8203;、指针经过等，用于提高网页的美&#8203;观程度与可交互性。</p>
            </blockquote>
            <ul>
                <li>结合<strong>伪类选择器</strong>
                    <code>:hover</code>(悬停/经过)、<code>:active</code>(点击并按住)、<code>:focus</code>(获得焦点)、<code>:checked</code>(表单控件选中)
                    设定元素在特定情况下的过渡效果
                </li>
                <li>使用<strong>媒体查询</strong>触发过渡效果，如下所示：</li>
            </ul>
            <pre class="codehilite"><code class="language-css"> /* 屏幕最大宽度为420px时触发动画 */
@media only screen and (max-width: 420px;) {  
    div {
        width: 100px;
        transition: width is;
    }
}
</code></pre>

            <hr>
            <h1 id="css3_6">七、CSS3动画</h1>
            <blockquote>
                <p>使用<code>transition</code>属性只能通过设置开始与结束的过渡效果，无法精准控制过渡中途的效果。<br>
                    通过CSS3动画的<strong>关键帧</strong>可以制作变化多样的动画效果。</p>
            </blockquote>
            <h2 id="1_10">1.关键帧</h2>
            <ul>
                <li>使用<code>@keyframes</code>规则定义关键帧，格式如下：</li>
            </ul>
            <pre class="codehilite"><code class="language-css">@keyframes 动画名称 { 时间位置{ CSS样式 } }
</code></pre>

            <ul>
                <li>时间位置即动画时长的百分比，取值为1% ~ 100%，也可以使用<code>from</code>关键字(表示0%)、<code>to</code>关键字(表示100%)表示。</li>
            </ul>
            <h2 id="2_11">2.动画的相关属性</h2>
            <h3 id="1-animation-name">① animation-name属性：设置动画的名称</h3>
            <pre class="codehilite"><code class="language-css">animation-name: 名称 | none;
</code></pre>

            <ul>
                <li>参数为动画的名称，对应想要应用的<code>@keyframes</code>动画名称。</li>
                <li>参数为<code>none</code>时，表示不应用或取消此动画。</li>
            </ul>
            <h3 id="2-animation-duration">② animation-duration属性：设置动画的时间</h3>
            <pre class="codehilite"><code class="language-css">aimation-duration: 时间值;
</code></pre>

            <ul>
                <li>取值以秒(s)或毫秒(ms)为单位，默认值为0。</li>
            </ul>
            <h3 id="3-animation-timing-function">③ animation-timing-function属性：设置动画的速度曲线</h3>
            <pre class="codehilite"><code class="language-css">animation-timing-function: liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
</code></pre>

            <ul>
                <li><code>liner</code>：线性过渡，即<strong>匀速</strong>进行过渡。</li>
                <li>
                    <code>ease</code>：平滑过渡，<strong>慢-快-慢</strong>的过渡效果，类似汽车<strong>快速启动-逐渐减速</strong>过程，适合<strong>快速响应</strong>(如按钮悬停)的过渡场景。
                </li>
                <li><code>ease-in</code>：<strong>慢-快</strong>的过渡效果。</li>
                <li><code>ease-out</code>：<strong>快-慢</strong>的过渡效果。</li>
                <li>
                    <code>ease-in-out</code>：<strong>慢-快-慢</strong>的过渡效果，类似于垂直电梯的<strong>缓慢启动-匀速上升-缓慢减速</strong>过程，适合<strong>平滑连贯</strong>(如页面切换)的过渡场景。
                </li>
                <li><code>cubic-bezier(n, n, n, n)</code>：贝赛尔曲线,用于精确控制过渡效果的曲线，<code>n</code>取值范围为0 ~ 1。</li>
            </ul>
            <h4 id="steps-start-end">
                此属性还可以设置为<code>steps(帧数, start | end)</code>方法，用于设置两个关键帧之间插入多少帧<strong>补间动画</strong></h4>
            <ul>
                <li><code>satrt</code>表示最后一帧是补间动画的开始，<code>end</code>表示第一帧是补间动画的开始。</li>
                <li>不使用<code>steps</code>方法时，浏览器自动设置补间动画。</li>
            </ul>
            <h3 id="4-animation-delay">④ animation-delay属性：设置动画的延迟时间</h3>
            <pre class="codehilite"><code class="language-css">animation-delay: 时间值;
</code></pre>

            <ul>
                <li>取值一般为延迟的时间值，以秒(s)或毫秒(ms)为单位，默认值为0。</li>
                <li>
                    设定为负值时，会截断过渡时间开头的一部分。如<code>duration</code>设置为<code>5s</code>，<code>delay</code>设置为<code>-2s</code>时，过渡效果会在触发后延迟2s，并从动画的第二秒开始过渡。
                </li>
            </ul>
            <h3 id="5-animation-iteration-count">⑤ animation-iteration-count属性：设置动画的播放次数</h3>
            <pre class="codehilite"><code class="language-css">animation-iteration-count: 播放次数 | infinite;
</code></pre>

            <ul>
                <li>播放次数默认为1。</li>
                <li>设置为<code>infinite</code>关键字实现循环播放。</li>
            </ul>
            <h3 id="6-animation-direction">⑥ animation-direction属性：设置动画的播放方向</h3>
            <pre class="codehilite"><code class="language-css">animation-direction: normal | alternate;
</code></pre>

            <ul>
                <li><code>noraml</code>:默认值，表示正常播放。</li>
                <li><code>alternate</code>:动画先正常播放，然后倒放一遍，并按此规律循环播放("折返跑"效果)。</li>
            </ul>
            <h3 id="7-animation-play-state">⑦ animation-play-state属性：设置动画的播放状态</h3>
            <pre class="codehilite"><code class="language-css">animation-play-state: paused | running;
</code></pre>

            <h3 id="8-animation-fill-mode">⑧ animation-fill-mode属性：设置动画不播放时的状态</h3>
            <pre class="codehilite"><code class="language-css">animation-fill-mode: none | forwards(保持结束状态) | backwards(保持初始状态) | both(播放前保持初始，播放后保持结束);
</code></pre>

            <h2 id="3_7">3.基于图片的动画效果</h2>
            <h3 id="1_11">① 原理</h3>
            <ul>
                <li>类似于<strong>胶片电影</strong>的原理，将动画逐帧切割后的图片拍成一行，组成一个很宽的图片列；</li>
                <li>通过控制图片的位置，使其在容器中每过一小段时间显示下一帧的内容；</li>
                <li>最后应用循环效果，实现动画的逐帧播放。</li>
            </ul>
            <h3 id="2_12">② 示例</h3>
            <ul>
                <li>动画素材：<br>
                    <img alt="" src="imgs/20250512223737976.png">
                </li>
                <li>网页源码：</li>
            </ul>
            <pre class="codehilite"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;动画示例&lt;/title&gt;
        &lt;style&gt;
            /* 定义 diV 容器的样式 */
            div {
                width: 125px;           /* 容器宽度 */
                height: 125px;          /* 容器高度 */
                margin-left: 50px;      /* 左外边距（水平定位） */
                margin-top: 50px;       /* 上外边距（垂直定位） */
                background: url(img/bgp.jpg) no-repeat 0 0;  /* 背景图片（不重复，初始位置 0 0） */
                animation: move 1s steps(8, end) infinite;   /* 应用动画：名称、时长、补间动画、循环播放 */
            }
            /* 定义关键帧动画 &quot;move&quot; */
            @keyframes move {
                0% {
                    background-position: 0 0;      /* 动画起始状态：背景图位置为左上角 */
                }
                100% {
                    background-position: -1000px 0; /* 动画结束状态：背景图向左移动 1000px（实现帧动画效果） */
                }
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- 动画容器：通过背景图位移实现逐帧动画 --&gt;
        &lt;div&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

            <ul>
                <li>实现效果：<br>
                    <img alt="" src="imgs/sample.gif">
                </li>
            </ul>
            <hr>
            <h1 id="_8">参考资料</h1>
            <div class="footnote">
                <hr>
                <ol>
                    <li id="fn:1">
                        <p>百度百科.CSS3[EB/OL].(2024-06-17)[2025-05-07].
                            https://baike.baidu.com/item/CSS3/4059544#reference-3.&#160;<a class="footnote-backref"
                                href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
                    </li>
                    <li id="fn:2">
                        <p>牧之 |.a与a:link、a:visited、a:hover、a:active[EB/OL].(2013-07-30)[2025-05-07].
                            https://www.cnblogs.com/exmyth/p/3226654.html.&#160;<a class="footnote-backref"
                                href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
                    </li>
                    <li id="fn:3">
                        <p>勤奋的夕阳一刀.CSS里面的长度单位px/pt/em/in/pc/mm/cm解释[EB/OL].(2015-10-07)[2025-05-08].
                            https://www.cnblogs.com/913815ccmm/p/4858638.html.&#160;<a class="footnote-backref"
                                href="#fnref:3" title="Jump back to footnote 3 in the text">&#8617;</a><a
                                class="footnote-backref" href="#fnref2:3"
                                title="Jump back to footnote 3 in the text">&#8617;</a></p>
                    </li>
                    <li id="fn:4">
                        <p>阮一峰.Flex 布局教程：语法篇[EB/OL].(2015-07-10)[2025-05-10].
                            https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html&#160;<a class="footnote-backref"
                                href="#fnref:4" title="Jump back to footnote 4 in the text">&#8617;</a><a
                                class="footnote-backref" href="#fnref2:4"
                                title="Jump back to footnote 4 in the text">&#8617;</a></p>
                    </li>
                    <li id="fn:5">
                        <p>阮一峰.CSS Grid 网格布局教程[EB/OL].(2019-03-25)[2025-05-10].
                            https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html&#160;<a
                                class="footnote-backref" href="#fnref:5"
                                title="Jump back to footnote 5 in the text">&#8617;</a></p>
                    </li>
                </ol>
            </div>
        </div>
    </section>

    <!-- 通用页脚 -->
    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img
                    src="imgs/../../res/logo_main.png" width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
</body>

</html>